require('./PageEvaluatedetail.styl');
import { Boxs, NavBar, Group, TextareaField,Context } from 'saltui';
import Icon from 'salt-icon'
import { Control } from 'react-keeper';
const { HBox, Box, VBox } = Boxs;
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');

class Evaluatedetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            urlList: '',//图片url
            selEvaluateRank: '',//选中的评价类别
            evaluateTitle: '',//评价内容类别
            evaluateStudentList: [],//评价学生
            evaluateId: '',//评价详情id
            createDate: '',//评价日期
            teacherName: '',//老师名字
            msg: ''//评价备注
        };
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this)
        this.rightText = Control.state.data.isCanEdit == "yes" ? '编辑' : '';
    }
    handleOnLeftClick() {
        Control.go(-1)
    }
  
    render() {
        return (
            <div className="evaluatedetail-parent">
                <NavBar
                    isShow={false}
                    title='评价详情'
                    onLeftClick={this.handleOnLeftClick}
                    onRightClick={Context.noop}
                    rightText=""
                />
                <div className="t-MT10 t-PR12 detail">
                    <Group.List className="t-LH30 t-PL19">
                        <HBox vAlign="center">
                            <Box className="detail-title">
                                {this.state.selEvaluateRank}
                            </Box>
                            <Box flex={1} className="t-ML25">
                                {this.state.evaluateTitle && this.state.evaluateTitle.name}
                            </Box>
                        </HBox>
                        <div className="detail-content">{this.state.msg}</div>
                        <VBox hAlign="end" className="t-MT80">
                            <Box>
                                {/* <Icon name="user" fill="rgb(217,229,241)" width="20" height="20" /> */}
                                {this.state.teacherName}
                            </Box>
                            <Box >
                                {this.state.createDate}
                            </Box>
                        </VBox>
                    </Group.List>
                </div>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.fetchDetail(Control.state.data)
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Evaluatedetail, Reflux.connect(Store));

module.exports = Evaluatedetail;
